<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div>前后端交互</div>
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript">
		/* 
			then参数中函数的返回值！
		*/
		function queryData(url) {
			//  优化
			return new Promise(function(resolve, reject) {
				// 创建Ajax对象
				var xhr = new XMLHttpRequest();
				// 指定一个回调函数【在里面处理响应的结果！】、
				xhr.onreadystatechange = function() {
					// 把不关心的状态都屏蔽掉
					if (xhr.readyState != 4) return;
					if (xhr.readyState == 4 && xhr.status == 200) {
						// 正常的数据
						resolve(xhr.responseText); // 拿到服务器响应的数据
					} else {
						// 处理异常的信息
						reject("服务器异常！")
					}
				};
				// 准备发送前的参数
				xhr.open('get', url);
				xhr.send(null);
			})
			return p;
		}
		queryData('http://localhost:3000/data')
			.then(function(data) {
				console.log(data)
				return queryData('http://localhost:3000/data1')
			})
			.then(function(data) {
				console.log(data)
				return new Promise(function(resolve, resject) {
					setTimeout(function() {
						// 记住， 这儿调用成功的结果 必须是 调用 resolve 来返回成功的结果！
						resolve('我是自定义的Promise对象返回的值！')
					}, 2000)
				})
			})
			// 思考一个问题， 就是下面一个then 由谁来调用呢？!
			// 实际上就是由上一个Promise对象来调用的！
			// 简而言之 上面的 返回值 就是下面 then 中形参的接收的值（上一个异步任务的结果！）
			.then(function(data) {
				// 由上面的解释可以知道这儿的形参接收到的结果 就是 resolve('我是自定义的Promise对象返回的值！') 中的值 请看打印结果
				console.log(data)
				// 下面测试返回一个普通值
				// 如果我们返回的是一个普通值 那么会生成一个新的默认的 Promise对象  从而来调用下一个then 进而保证下面的链式操作！
				return 'lvhang';
			})
			// 那么现在下面一个then接收到的是一个什么呢》？!
			// 就是 我们 return 返回 普通 的值了！
			.then(function(data) {
				console.log(data)
			})
	</script>
</body>
</html> 